<template>
  <div class="h-flow-user-task-node-history-wrapper">
    <div v-for="item in dataSource" class="h-flow-user-task-node-history">
      <div class="h-flow-user-task-node-history-header">
        <FlowAvatar :user-id="item.userId" :request="request"/>
        <div class="flow-user-name">
          <a>{{ item.username }}</a>
        </div>
        <div class="flow-user-approve-type">{{ item.approveTypeName || item.commentTypeName }}</div>
        <div class="flow-user-time">{{ item.completeTime || item.createTime }}</div>
        <div class="flow-task-name">
          {{ item.taskName }}
          <span v-if="item.countFromUsername" style="font-weight: bold">(来自: {{
              item.countFromUsername
            }} 的加签)</span>
        </div>
      </div>
      <RowAttribute :label="item.commentTypeName" v-if="item.commentInfo"
                    label-width="100px" class="h-flow-user-task-node-history-more-info">
        <div style="padding-top: 5px">
          {{ getCommentInfo(item) }}
        </div>
      </RowAttribute>
      <div class="h-flow-user-task-node-history-body">
        <div v-html="item.message"/>
        <Divider v-if="item.userSign" style="margin: 0 0 5px 0"/>
        <div style="display: flex" v-if="item.attachmentIds || item.userSign">
          <div style="padding: 5px; flex: 0.5">
            <span>相关附件:</span>
            <FlowAttachmentUpload
                :request="request" :disabled="true"
                v-model="item.attachmentIds"/>
          </div>
          <div style="flex: 0.5">
            <span>手签:</span>
            <span v-if="!item.userSign" style="margin-left: 5px">{{item.username}}</span>
            <img class="h-flow-user-task-node-history-user-sign-img" :alt="item.username" v-else
                 :src="`${request.baseURL}/flow/user/getUserSign?userSign=${item.userSign}&tenantId=${tenantId}`">
          </div>
        </div>
        <div v-else style="height: 10px;"/>
      </div>
    </div>
  </div>
</template>
<script>
import FlowAvatar from '@/components/flow/FlowAvatar/FlowAvatar.vue';
import {createProps} from '@/utils';
import RowWrapper from '@/components/flow/layout/RowWrapper.vue';
import RowAttribute from '@/components/flow/layout/RowAttribute.vue';
import {Divider, Tag} from 'ant-design-vue';
import Layout from '@/components/flow/layout/Layout.vue';
import LayoutBody from '@/components/flow/layout/LayoutBody.vue';
import LayoutSide from '@/components/flow/layout/LayoutSide.vue';
import FlowAttachmentUpload from '@/components/flow/flowPass/components/FlowAttachmentUpload.vue';


const titles = {};
export default {
  name: 'FlowUserTaskNodeHistory',
  components: {
    FlowAttachmentUpload,
    Divider,
    LayoutSide,
    LayoutBody,
    Layout,
    RowAttribute,
    Tag,
    RowWrapper,
    FlowAvatar
  },
  props: {
    dataSource: createProps(Array),
    request: createProps(Object, () => ({
      baseURL: '/',
      headers: {},
    }))
  },
  methods: {
    getLabel(item) {
      return item.commentTypeName;
    },
    getCommentInfo(item) {
      return this[`${item.commentType}Info`](item);
    },
    addNotifyInfo(item) {
      return JSON.parse(item.commentInfo).map(i => i.userConfigName).toString();
    },
    subtractUserSignInfo(item) {
      return item.commentInfo;
    },
    addUserSignInfo(item) {
      return JSON.parse(item.commentInfo).map(i => i.userConfigName).toString();
    }
  },
  computed: {
    tenantId() {
      try {
        return this.request.headers.tenantId || this.request.headers['X-Tenant-Id']
      } catch(e) {
        console.error(e)
      }
      return undefined
    },
  }
};
</script>
<style>
.h-flow-user-task-node-history-wrapper {

}

.h-flow-user-task-node-history {

}

.h-flow-user-task-node-history-header .flow-user-approve-type {
  color: rgb(17, 17, 17);
  font-weight: 700;
  padding: 0 10px;
}

.h-flow-user-task-node-history-header .flow-user-time {
  color: rgb(163, 163, 163);
}

.h-flow-user-task-node-history-header .flow-task-name {
  flex: 1;
  text-align: right;
}

.h-flow-user-task-node-history-header .flow-user-name {
  padding: 0 10px;
}

.h-flow-user-task-node-history-header {
  display: flex;
  align-items: center;
  background: #f4f5f8;
  margin-bottom: 10px;
  padding: 5px 20px;
  border-radius: 4px;
}

.h-flow-user-task-node-history-body {
  padding-left: 63px;
  margin-bottom: 5px;
}

.h-flow-user-task-node-history-more-info {

}

.h-flow-user-task-node-history-user-sign {
  text-align: right;
}

.h-flow-user-task-node-history-user-sign-img {
  width: 150px;
  height: 60px;
  margin-top: 10px;
}
</style>